<template>
  <div class="login">
    <div class="login-logo">
      <img src="../../assets/reset_password.png" alt="">
    </div>
    <div class="login-content">
      <div class="form">
        <div class="title">重置密码</div>
        <div class="form-title">密码</div>
        <el-input class="input" v-model="password" type="password" show-password />
        <div class="form-title">重复密码</div>
        <el-input class="input" v-model="repeatPassword" type="password" show-password />
        <div class="strength">密码强度 <span :style="{color: activeColor}">{{strength}}</span></div>
        <button class="button" @click="resetClick" >重置密码</button>
        <div class="no-account">
          <div>
            <span>没有账号？</span>
            <span class="go-login">用户注册</span>
          </div>
          <div>
            <span class="font">已有账号？</span>
            <span class="go-register">用户登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref , computed } from 'vue'
import { useStore } from 'vuex'
import router from '../../router/index'

import { ElMessage } from 'element-plus'

import { isMailbox , passwordStrength , debounce } from '../../utils/formValidation'

export default {
  setup() {
    const store = useStore()
    const password = ref('')
    const repeatPassword = ref('')
    // 密码强度
    const strength = computed( () => {
      return passwordStrength(password.value)
    })
    const activeColor = computed( () => {
      if(strength.value === '强') return 'red'
      if(strength.value === '中') return 'blue'
      if(strength.value === '弱') return 'green'
    })
    // 登录逻辑
    const resetFun = () => {
      if(password.value === repeatPassword.value) {
        store.dispatch('login/ResetAction' , { password:password.value })
      }else {
        ElMessage.error('请输入相同密码')
      }
    }
    const resetClick = debounce(resetFun, 500)
    // 跳转登录界面
    const goLogin = () => {
      router.push('/login')
    }
    // 跳转注册界面
    const goRegister = () => {
      router.push('/register')
    }
    return {
      password,
      repeatPassword,
      strength,
      activeColor,
      resetClick,
      goLogin,
      goRegister
    }
  }
}
</script>

<style lang="less">
.login{
  display: flex;
  justify-content: space-between;
  width: 14.40rem;
  height: 10.24rem;
  .login-logo{
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(154, 154, 235, 0.5);
      img{
        position: absolute;
        left: 1.39rem;
        top: 3.01rem;
        width: 4.39rem;
        height: 4.80rem;
      }
  }
  .login-content{
    width: 50%;
    height: 100%;
    .form{
      position: absolute;
      top: 2.24rem;
      left: 8.47rem;
      width: 4.46rem;
      .title{
        margin-bottom: 0.325rem;
        text-align: center;
        font-weight: 400;
        font-size: 0.32rem;
      }
      .form-title{
        font-weight: 400;
        font-size: 0.24rem;
      }
      .input{
        margin: 0.198rem 0;
        width: 4.46rem;
        height: 0.55rem;
        font-size: 0.22rem;
        border-color: #4D4DDB;
      }
      .button{
        display: block;
        margin-top: 0.24rem;
        margin-bottom: 0.4rem;
        width: 100%;
        height: 0.55rem;
        background-color: #1E1E1E;
        color: #FFFFFF;
        border-radius: 8px;
      }
      .no-account{
        display: flex;
        justify-content: space-between;
        .go-login{
          color: #4D4DDB;
          cursor:pointer;
        }
        .go-register{
          color: #4D4DDB;
          cursor:pointer;
        }
      }
    }
  }
}
</style>